<template>
  <ComWrapper>
    <el-button type="primary" class="increase" icon="el-icon-circle-plus" @click="dialogFormVisible = true">添加菜单</el-button>

    <Table
      :data="menus"
      style="width: 100%; margin-top: 20px"
      row-key="title"
      stripe
      :header-row-style="{color: '#346fff', fontWeight: 'bolder', fontSize: '16px'}"
      lazy
      :load="loadMenu"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="title" label="菜单" />
      <el-table-column prop="index" label="排序" />
      <el-table-column prop="path" label="路径" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-switch v-model="scope.row.isEnable" active-color="#346fff" inactive-color="#ccc" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button size="small" type="primary" class="primary" v-if="!scope.row.hasChildren">应用到</el-button>
          <el-button size="small" type="primary" class="primary" @click="onEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </Table>
    <addMenuModal 
      :menus="menus" 
      v-model="dialogFormVisible" 
      :parentRoutes="parentRoutes"
      :formData="formData" 
    />
  </ComWrapper>
</template>

<script setup>
import {ref, onMounted, defineAsyncComponent} from 'vue'
import routes from '@/router/routes'

const Table = defineAsyncComponent(() => import('@/components/Table'))
const addMenuModal = defineAsyncComponent(() => import('./component/MenuDialog'))

const menus = ref([])
const parentRoutes = ref([])
const formData = ref({})
const dialogFormVisible = ref(false)

onMounted(() => {
  generateMenus()
})

// 生成菜单
function generateMenus() {
  menus.value = routes.map((item, index) => ({
    hasChildren: item.children && item.children.length ? true : false,
    children: item.children || [],
    name: item.meta.title || 'Admin',
    path: item.path,
    index: index + 1,
    isEnable: true,
    title: item.meta.title
  }))

  routes.map(item => {
    if (item.children) {
      parentRoutes.value.push(item)
    }
  })

  console.log(parentRoutes.value)
}
function onEdit(item) {
  dialogFormVisible.value = true
  formData.value = item
}
// 加载菜单树
function loadMenu(tree, treeNode, resolve) {
  let trees = []
  trees = tree.children.map((item, index) => ({
    children: item.children,
    name: item.meta.title,
    path: item.path,
    index: `${tree.index}-${index + 1}`,
    isEnable: true,
    title: item.meta.title,
  }))
  console.log(trees)
  const timer = setTimeout(() => {
    clearTimeout(timer)
    resolve(trees)
  }, 300)
  
}
</script>

<style scoped lang="scss">
.increase{
	color: #ffffff;
	animation: up-down 1.5s  ease-in-out infinite alternate-reverse both;
}
@-webkit-keyframes up-down {
	0% { transform:translateY(10px) }
	100% { transform:translateY(-10px) }
}
@keyframes up-down {
	0% { transform:translateY(10px) }
	100% { transform:translateY(-10px) }
}
</style>
